<!-- 楼栋详情 -->
<template>
	<view class="home-container">
		<u-gap height="6" bgColor="#F7F7F7"></u-gap>
		<view class="cell">
			<view class="label">
				单元
			</view>
			<view class="list">
				<view :class="[currentDataCell == index ? 'active':'value']" v-for="(item, index) in cellList"
					:key="index">
					<text :data-current="index" @click="changeCellTab(index, item)">{{item}}</text>
				</view>
			</view>
		</view>
		<view class="title">
			<text>楼层</text>
			<text>{{currentDataCell + 1}}单元</text>
		</view>
		<u-gap height="6" bgColor="#F7F7F7"></u-gap>
		<view class="box" v-if="openCellShow">
			<view class="item" v-for="(item, index) in houseList" :key="index">
				<view class="step">{{index + 1}}</view>
				<view class="con">
					<view v-for="(val, i) in item" :key="i">
						<!-- 正常 -->
						<view @click="opencell(val, i)" :class="['house', val.isClean == 1 ? 'clear' : '']"
							v-if="val.roomType == 1">
							<text>{{val.houseName}}</text>
							<text>{{val.houseArea}}{{val.houseArea ? "m²" : ""}}</text>
							<text>{{val.houseType}}</text>
						</view>
						<!-- 合并 -->
						<view @click="opencell(val, i)" class="merge"
							:style="{'width':(subWidth*val.coordinate.split(',').length + 7 * val.coordinate.split(',').length)+'rpx'}"
							v-if="val.roomType == 2">
							<text>{{val.houseName}}</text>
							<text>{{val.houseArea}}{{val.houseArea ? "m²" : ""}}</text>
							<text>{{val.houseType}}</text>
						</view>
						<!--拆分-->
						<view @click="opencell(val, i)" class="split" v-if="val.roomType == 3">
							<text>{{val.houseName}}</text>
							<text>{{val.houseArea}}{{val.houseArea ? "m²" : ""}}</text>
							<text>{{val.houseType}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box" v-else>
			<u-checkbox-group @change="checkboxChange">
				<view class="item" v-for="(item, index) in houseList" :key="index">
					<view class="step">{{index + 1}}</view>
					<view class="con">
						<view v-for="(val, i) in item" :key="i">
							<!-- 正常 -->
							<view :class="['house', val.isClean == 1 ? 'clear' : '']" v-if="val.roomType == 1">
								<u-checkbox v-if="checkboxShow" v-model="val.checked" shape="circle" :name="val.id">
								</u-checkbox>
								<text>{{val.houseName}}</text>
								<text>{{val.houseArea}}{{val.houseArea ? "m²" : ""}}</text>
								<text>{{val.houseType}}</text>
							</view>
							<!-- 合并 -->
							<view class="merge"
								:style="{'width':(subWidth*val.coordinate.split(',').length + 7 * val.coordinate.split(',').length)+'rpx'}"
								v-if="val.roomType == 2">
								<u-checkbox v-if="checkboxShow" v-model="val.checked" shape="circle" :name="val.id">
								</u-checkbox>
								<text>{{val.houseName}}</text>
								<text>{{val.houseArea}}{{val.houseArea ? "m²" : ""}}</text>
								<text>{{val.houseType}}</text>
							</view>
							<!--拆分-->
							<view class="split" v-if="val.roomType == 3">
								<u-checkbox v-if="checkboxShow" v-model="val.checked" shape="circle" :name="val.id">
								</u-checkbox>
								<text>{{val.houseName}}</text>
								<text>{{val.houseArea}}{{val.houseArea ? "m²" : ""}}</text>
								<text>{{val.houseType}}</text>
							</view>
						</view>
					</view>
				</view>
			</u-checkbox-group>
		</view>
		<view class="btns" v-if="optionBtnShow">
			<button @click="batchEdit">批量编辑</button>
			<button @click="over">完成</button>
		</view>

		<view class="editBtns" v-else>
			<view class="btnsInfo">
				<text @click="checkedAll()" style="margin-left: 15rpx;">全选</text>
				<text class="line">|</text>
				<text>已选</text>
				<text>{{checkLength}}</text>
				<text>个</text>
			</view>
			<view class="cancelEdit">
				<text @click="cancelEdit()">取消编辑</text>
				<button @click="next()">确定</button>
			</view>
		</view>

		<!-- <view class="editBtns" v-else> -->
		<!-- <button @click="editInfo()">编辑</button>
			<button @click="combineFloor()">合并</button>
			<button @click="splitFloor()">拆分</button>
			<button @click="clearFloor()">清除</button>
			<button @click="reverse()">恢复</button> -->
		<!-- </view> -->
		<!-- 基本信息弹出层 -->
		<u-popup v-model="showFormWork" mode="bottom" :closeable="true" @close="close">
			<view class="popupTitle">
				{{isCheckedList.join(",")}}
			</view>
			<view class="popupCon">
				<view class="item">
					<text style="font-size: 28rpx;">单元：</text>
					<text style="font-size: 28rpx;">{{unit}}</text>
				</view>
				<u-form :model="form">
					<view class="item">
						<text style="font-size: 28rpx;">户型：</text>
						<u-select v-model="showHouse" mode="mutil-column" :list="columnsHouse" @confirm="changeHouse">
						</u-select>
						<text @click="showPicker()" v-if="form.house">{{form.house}}</text>
						<text v-else style="color: rgb(192, 196, 204);font-size: 28rpx;"
							@click="showPicker()">请选择&nbsp;></text>
					</view>
					<view class="item">
						<text style="font-size: 28rpx;">面积：</text>
						<u-input type="digit" v-model="form.area" :border="false" inputAlign="right"
							placeholder="请输入面积"></u-input>
						<text style="margin-left: 10rpx;font-size: 28rpx;">m²</text>
					</view>
				</u-form>
				<view class="myBtn">
					<view>
						<text @click="combineFloor()" v-show="isCheckedList.length > 1">合并房间</text>
						<text @click="splitFloor()" v-show="isCheckedList.length = 1">拆分房间</text>
						<text @click="clearFloor()" v-show="isCheckedList.length = 1">合并清除</text>
						<text @click="reverse()" v-show="isCheckedList.length = 1">恢复房间</text>
					</view>
					<text class="btn" @click="submit()">确定</text>
				</view>
			</view>
		</u-popup>
		<!-- 点击房间号进行编辑 -->
		<u-popup v-model="showFormWorkEdit" mode="bottom" :closeable="true" @close="showFormWorkEdit=false">
			<view class="popupTitle">
				{{numCell}}
			</view>
			<view class="popupCon">
				<view class="item">
					<text style="font-size: 28rpx;">单元：</text>
					<text style="font-size: 28rpx;">{{obj.unitName}}</text>
				</view>
				<u-form :model="formEdit">
					<view class="item">
						<text style="font-size: 28rpx;">户型：</text>
						<u-select v-model="showHouse" mode="mutil-column" :list="columnsHouse" @confirm="changeHouse">
						</u-select>
						<text @click="showPicker()" v-if="formEdit.house">{{formEdit.house}}</text>
						<text v-else style="color: rgb(192, 196, 204);font-size: 28rpx;"
							@click="showPicker()">请选择&nbsp;></text>
					</view>
					<view class="item">
						<text style="font-size: 28rpx;">面积：</text>
						<u-input type="digit" v-model="formEdit.area" :border="false" inputAlign="right"
							placeholder="请输入面积"></u-input>
						<text style="margin-left: 10rpx;font-size: 28rpx;">m²</text>
					</view>
				</u-form>
				<button class="submit" @click="submitEdit(obj)">确定</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		floorHouseUpdate,
		floorControllerSelectInfo,
		selectFloorAndUnit,
		mergeHouse,
		splitHouse,
		updateSaleInfo,
		buildingOk
	} from '@/unit/api.js';
	export default {
		data() {
			return {
				active: false, // radio选中状态
				currentDataBuild: 0,
				currentDataCell: 0,
				checkboxValue: [],
				checkboxShow: false, // 自定义checkbox
				optionBtnShow: true, // 操作按钮显示
				checkLength: 0, // 已选多少个
				checkedSingle: false,
				showPopup: false, // 弹出层
				currentDataColor: "", // 状态选择
				isCheckedList: [], // 已选择房间数
				isIdList: [], // 已选择房间数(用于提交)
				showSumit: false, // 提交登录框
				communityId: '', // 小区id
				loginContent: '请检查您的操作无误，请提交！',
				isReverse: false, // 恢复房间
				form: {
					deposit: '', // 定金
					price: '', // 单价
					totalPrice: '' // 总价
				},
				// 基本案列数据
				buildList: [], // 栋列表
				houseList: [], // 单元下面的房子数
				infoList: [], // 房间信息
				cellList: [], // 单元集合
				subWidth: 202,
				showFormWork: false, // 编辑楼层模版弹出层
				showHouse: false,
				basicTemplate: {}, // 上一个页面返回的楼层模板
				showFormWorkEdit: false, // 点击房间号进行修改
				formEdit: {
					house: '', // 户型
					area: '' // 面积
				},
				numCell: '',
				obj: '',
				openCellShow: true,
				columnsHouse: [
					[{
							value: '1',
							label: '1室'
						},
						{
							value: '2',
							label: '2室'
						},
						{
							value: '3',
							label: '3室'
						},
						{
							value: '4',
							label: '4室'
						},
						{
							value: '5',
							label: '5室'
						}
					],
					[{
							value: '1',
							label: '1厅'
						},
						{
							value: '2',
							label: '2厅'
						},
						{
							value: '3',
							label: '3厅'
						},
						{
							value: '4',
							label: '4厅'
						},
						{
							value: '5',
							label: '5厅'
						}
					],
					[{
							value: '1',
							label: '1卫'
						},
						{
							value: '2',
							label: '2卫'
						},
						{
							value: '3',
							label: '3卫'
						},
						{
							value: '4',
							label: '4卫'
						},
						{
							value: '5',
							label: '5卫'
						}
					],
					[{
							value: '1',
							label: '1厨'
						},
						{
							value: '2',
							label: '2厨'
						},
						{
							value: '3',
							label: '3厨'
						},
						{
							value: '4',
							label: '4厨'
						},
						{
							value: '5',
							label: '5厨'
						}
					],
					[{
							value: '1',
							label: '1阳台'
						},
						{
							value: '2',
							label: '2阳台'
						},
						{
							value: '3',
							label: '3阳台'
						},
						{
							value: '4',
							label: '4阳台'
						},
						{
							value: '5',
							label: '5阳台'
						}
					],
				],
				form: {
					house: '', // 户型
					area: '' // 面积
				},
				unit: '', // 单元
				id: '',
				i: ''
			}
		},
		onLoad(option) {
			this.id = option.id;
			console.log("id", this.id)
			this.getFloorList(this.id);
			let _that = this;
			setTimeout(function() {
				_that.changeCellTab(0, '一单元');
			}, 1000)
		},
		methods: {
			getFloorList(id) {
				floorControllerSelectInfo(id).then(data => {
					this.cellList = data.data.object.floorHouseBaseVO.map(item => {
						return item.unit
					});
					console.log("this.cellList", this.cellList)
					this.infoList = data.data.object.floorHouseBaseVO;
				});
			},
			changeCellTab(index, value) {
				console.log(index, value)
				this.houseList = []; // 清空原始数据
				this.currentDataCell = index;
				console.log("index", value)
				this.unit = value;
				this.infoList.map(item => {
					if (item.unit == value) {
						this.houseList = item.floorHouseEntityList;
					}
				})
			},
			// 批量编辑
			batchEdit() {
				this.checkboxShow = true;
				this.optionBtnShow = false;
				this.openCellShow = false;
			},
			// 取消编辑
			cancelEdit() {
				this.checkboxShow = false;
				this.optionBtnShow = true;
				this.checkLength = 0;
				this.houseList.map(item => {
					item.map(val => {
						return val.checked = false;
					})
				})
			},
			checkboxChange(n) {
				this.checkLength = n.length;
				this.isIdList = n;
				console.log("this.isIdList", this.isIdList)
				this.isIdList.map(item => {
					this.houseList.map(val => {
						val.filter(v => {
							if (v.id == item) {
								this.isCheckedList.push(v.houseName)
							}
						});
					});
				});
				this.isCheckedList = [...new Set(this.isCheckedList)]
			},
			// 全选
			checkedAll() {
				this.houseList.map(item => {
					item.map(val => {
						return val.checked = true;
					})
				})
				this.houseList = this.houseList;
				let newArr = this.houseList.reduce(function(pre, old) {
					return pre.concat(old)
				}, []);
				this.checkLength = newArr.length;
				this.isIdList = newArr.map(item => item.id);
				this.isCheckedList = newArr.map(item => item.houseName)
			},
			next() {
				this.showFormWork = true;
			},
			// 合并
			combineFloor() {
				if (this.isIdList < 2) {
					uni.showToast({
						title: '至少选择两项',
						icon: "none",
						duration: 2000
					});
					return false;
				} else {
					let params = {
						houseIds: this.isIdList.join(",")
					};
					console.log(params)
					mergeHouse(params).then(data => {
						console.log("合并", data)
						this.optionBtnShow = true;
						this.checkboxShow = false;
						this.getFloorList(this.id);
						this.showFormWork = false;
						let _that = this;
						setTimeout(function() {
							_that.changeCellTab(0, '一单元');
						}, 1000)
					});
				}
			},
			// 拆分
			splitFloor() {
				if (this.isIdList < 1) {
					uni.showToast({
						title: '至少选择一项',
						icon: "none",
						duration: 2000
					});
					return false;
				} else {
					let params = {
						houseId: this.isIdList.join(",")
					};
					console.log(params)
					splitHouse(params).then(data => {
						this.optionBtnShow = true;
						console.log("合并", data)
						this.checkboxShow = false;
						this.showFormWork = false;
						this.getFloorList(this.id);
						let _that = this;
						setTimeout(function() {
							_that.changeCellTab(0, '一单元');
						}, 1000)
					});
				}
			},
			// 恢复房间
			reverse() {
				if (this.isIdList < 1) {
					uni.showToast({
						title: '至少选择一项',
						icon: "none",
						duration: 2000
					});
					return false;
				} else {
					let params = {
						houseIds: this.isIdList.join(",")
					};
					console.log(params)
					splitHouse(params).then(data => {
						this.optionBtnShow = true;
						console.log("恢复", data)
						this.checkboxShow = false;
						this.getFloorList(this.id);
						let _that = this;
						setTimeout(function() {
							_that.changeCellTab(0, '一单元');
						}, 1000)
					});
				}
			},
			// 清除
			clearFloor() {
				let updateDTOs = [{
					houseArea: this.form.area,
					houseNo: this.isCheckedList.join(","),
					houseType: this.form.house,
					id: this.isIdList.join(","),
					isClean: 1
				}]
				updateSaleInfo(updateDTOs).then(data => {
					this.showFormWork = false;
					this.isIdList = [];
					this.form.area = "";
					this.form.house = "";
					this.showFormWork = false;
					this.getFloorList(this.id);
					this.houseList.map(item => {
						item.map(val => {
							return val.checked = false;
						})
					})
					let _that = this;
					setTimeout(function() {
						_that.changeCellTab(0, '一单元');
					}, 1000)
				});
			},
			editInfo() {
				if (this.isIdList < 1) {
					uni.showToast({
						title: '至少选择一项',
						icon: "none",
						duration: 2000
					});
					return false;
				} else {
					this.showFormWork = true;
				}
				console.log("dddd")

			},
			// 关闭弹框
			close() {
				this.showFormWork = false;
				this.checkboxShow = false;
				this.optionBtnShow = true;
				this.checkLength = 0;
				this.houseList.map(item => {
					item.map(val => {
						return val.checked = false;
					})
				})
			},
			// 打开户型弹出层
			showPicker() {
				this.showHouse = true;
			},
			// 户型弹框选择
			changeHouse(e) {
				let newArr = [];
				e.map(item => {
					newArr.push(item.label)
				});
				this.form.house = newArr.join("");
				this.formEdit.house = newArr.join("");
			},
			// 点击房间弹出面积户型修改
			opencell(item, i) {
				console.log("item", item)
				this.formEdit.house = item.houseType;
				this.formEdit.area = item.houseArea;
				this.showFormWorkEdit = true;
				this.obj = item;
				this.i = i;
				this.numCell = item.houseName;
			},
			submitEdit(obj) {
				let updateDTOs = [{
					"houseArea": this.formEdit.area,
					"houseNo": obj.houseName,
					"houseType": this.formEdit.house,
					"id": obj.id,
					"isClean": 0
				}]
				updateSaleInfo(updateDTOs).then(data => {
					this.showFormWorkEdit = false;
					this.isIdList = [];
					this.formEdit.area = "";
					this.formEdit.house = "";
					this.getFloorList(this.id);
					this.houseList.map(item => {
						item.map(val => {
							return val.checked = false;
						})
					})
					let _that = this;
					setTimeout(function() {
						_that.changeCellTab(0, '一单元');
					}, 1000)
				});
			},
			// 面积户型修改
			submit() {
				console.log("this.hous", this.houseList)
				let newArr = this.houseList.reduce(function(pre,old){
					return pre.concat(old)
				}, []);
				console.log(newArr, "newsaa")
				let updateDTOs = [];
				newArr.filter(item => {
					this.isIdList.map(val => {
						if(val == item.id) {
							updateDTOs.push({
								houseArea: this.form.area,
								houseNo: item.houseName,
								houseType: this.form.house,
								id: item.id,
								isClean: 0
							})
						}
					})
				});
				updateSaleInfo(updateDTOs).then(data => {
					console.log("基础信息修改", data)
					this.optionBtnShow = true;
					this.showFormWork = false;
					this.checkboxShow = false;
					this.isCheckedList = [];
					this.isIdList = [];
					this.form.area = "";
					this.form.house = "";
					this.getFloorList(this.id);
					console.log("xxxxxxx", this.houseList)
					this.houseList.map(item => {
						item.map(val => {
							return val.checked = false;
						})
					})
					let _that = this;
					setTimeout(function() {
						_that.changeCellTab(0, '一单元');
					}, 1000)
				});
			},
			// 完成
			over() {
				let params = {
					floorId: this.id
				};
				buildingOk(params).then(data => {
					uni.reLaunch({
						url: "../index/index"
					})
				});
			}
		}
	}
</script>

<style lang="scss">
	.myBtn {
		width: 90%;
		margin: auto;
		display: flex;
		justify-content: space-between;
		height: 140rpx;
		line-height: 140rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		align-items: center;

		text {
			color: #1A9CEE;
			display: inline-block;
		}

		view {
			text {
				margin-right: 20rpx;
				font-size: 32rpx;
			}
		}

		.btn {
			float: right;
			width: 180rpx !important;
			height: 80rpx;
			line-height: 80rpx;
			background: #1A9CEE;
			color: #fff !important;
			text-align: center;
			border-radius: 10rpx;
		}
	}

	.popupTitle {
		text-align: center;
		font-size: 32rpx;
		color: #333333;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #E4E4E4;
		width: 100%;
	}

	.popupCon {
		width: 95%;
		margin: auto;

		.item {
			margin: auto;
			height: 80rpx;
			line-height: 80rpx;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			width: 95%;
			border-bottom: 1px solid #F9F9F9;
			align-items: center;
			font-size: 32rpx;

			/deep/.u-input__content__field-wrapper__field {
				text-align: right !important;
				margin-right: 20rpx;
				font-size: 32rpx !important;
			}
		}

		.submit {
			background-image: linear-gradient(to right, #21A9FF, #199AEC) !important;
			height: 90rpx;
			color: #fff;
			font-size: 32rpx;
			margin-bottom: 50rpx;
			margin-top: 40rpx;
			line-height: 90rpx;
		}
	}

	.cell {
		width: 95%;
		margin: auto;
		margin-top: 20rpx;
		display: flex;
		flex-wrap: nowrap;

		.active {
			background: #EFFAFF;
			color: #333;
			font-size: 28rpx;
			width: 140rpx;
			float: left;
			margin-bottom: 20rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			margin-left: 10rpx;
			border: 1px solid #A0E8FF;
		}

		.label {
			width: 100rpx;
			font-size: 28rpx;
			text-align: center;
		}

		.list {
			width: calc(100% - 100rpx);
			display: flex;
			flex-wrap: wrap;

			.value {
				background: #F7F7F7;
				color: #333;
				font-size: 28rpx;
				width: 140rpx;
				float: left;
				margin-bottom: 20rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				margin-left: 10rpx;
				border: 1px solid #F7F7F7;
			}
		}
	}

	.u-checkbox-group {
		display: block !important;
		flex-wrap: inherit !important;
	}

	.building,
	.cell {
		width: 95%;
		margin: auto;
		margin-top: 20rpx;
		display: flex;
		flex-wrap: nowrap;

		.active {
			background: #EFFAFF;
			color: #333;
			font-size: 28rpx;
			width: 140rpx;
			float: left;
			margin-bottom: 20rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			margin-left: 10rpx;
			border: 1px solid #A0E8FF;
		}

		.label {
			width: 100rpx;
			font-size: 28rpx;
			text-align: center;
		}

		.list {
			width: calc(100% - 100rpx);
			display: flex;
			flex-wrap: wrap;

			.value {
				background: #F7F7F7;
				color: #333;
				font-size: 28rpx;
				width: 140rpx;
				float: left;
				margin-bottom: 20rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				margin-left: 10rpx;
				border: 1px solid #F7F7F7;
			}
		}
	}

	.title {
		width: 90%;
		margin: auto;
		display: flex;
		margin-top: 40rpx;

		text {
			height: 50rpx;
			line-height: 50rpx;
			display: inline-block;
			font-size: 28rpx;
			color: #333;
			margin-bottom: 30rpx;

			&:first-child {
				width: 80rpx;
			}

			&:last-child {
				width: calc(100% - 80rpx);
				background: #EFFAFF;
				text-align: center;
			}
		}
	}

	.box {
		width: 100%;
		overflow-x: scroll;
		margin-left: 20rpx;
		margin-top: 40rpx;

		.item {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;



			&:first-child {
				.step {
					border-radius: 50rpx 50rpx 0 0;
				}
			}

			&:last-child {
				.step {
					border-radius: 0rpx 0rpx 50rpx 50rpx;
				}
			}

			.step {
				background: rgba(0, 0, 0, 0.2);
				width: 30rpx;
				font-size: 28rpx;
				text-align: center;
				line-height: 180rpx;
				color: #fff;
			}

			.con {
				display: flex;
				width: calc(100% - 30rpx);
				margin-top: 10rpx;
				margin-bottom: 10rpx;

				/deep/.u-checkbox {
					position: absolute;
					left: 0;
					right: 0;
					margin-left: auto;
					margin-right: auto;
					text-align: center;
					display: flex;
					justify-content: center;
					height: 100%;
					width: 100%;
					background: rgba(0, 0, 0, 0.2);
				}

				/deep/.u-checkbox__icon-wrap {
					margin-left: 0;
					margin-right: 0;
					text-align: center;
					margin: auto;
					position: absolute;
					display: flex;
					justify-content: center;
					border: 1px solid #2B85E4;
				}

				.split {
					width: 90rpx !important;
					height: 178rpx;
					border: 1px solid #DDDDDD;
					height: 180rpx;
					font-size: 24rpx;
					color: #666666;
					margin-left: 20rpx;
					text-align: center;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					position: relative;
					flex-shrink: 0;

					text {
						display: block;
						width: 100%;

						&:first-child {
							font-size: 28rpx;
							color: #000;
						}
					}
				}

				.merge {
					border: 1px solid #DDDDDD;
					height: 180rpx;
					font-size: 24rpx;
					color: #666666;
					margin-left: 20rpx;
					text-align: center;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					position: relative;
					flex-shrink: 0;

					text {
						display: block;
						width: 100%;

						&:first-child {
							font-size: 28rpx;
							color: #000;
						}
					}
				}

				.house {
					border: 1px solid #DDDDDD;
					width: 202rpx;
					height: 180rpx;
					font-size: 24rpx;
					color: #666666;
					margin-left: 20rpx;
					text-align: center;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					position: relative;
					flex-shrink: 0;

					.activeHouse {
						width: 0;
						height: 0;
						border-top: 50px solid transparent;
						border-bottom: 50px solid transparent;
						border-left: 50px solid #ff7f50;
					}

					text {
						display: block;
						width: 100%;

						&:first-child {
							font-size: 28rpx;
							color: #000;
						}
					}


				}

				.clear {
					background: #F0F0F0;
				}
			}
		}

	}

	.btns {
		margin: auto;
		margin-top: 50rpx;
		display: flex;
		margin-bottom: 50rpx;
		width: 90%;
		justify-content: space-between;
		display: flex;

		button {
			font-size: 32rpx;

			&:first-child {
				width: 45%;
				height: 80rpx;
				line-height: 80rpx;
				background: none;
				color: #1A9CEE;
				border: 1px solid #1A9CEE;
			}

			&:last-child {
				width: 45%;
				height: 82rpx;
				line-height: 82rpx;
				background: #1A9CEE;
				color: #fff;
			}
		}
	}

	.editBtns {
		margin: auto;
		margin-top: 50rpx;
		display: flex;
		margin-bottom: 50rpx;
		width: 90%;
		align-items: center;
		justify-content: space-between;

		.line {
			vertical-align: middle;
			color: #E4E4E4;
			margin-left: 10rpx;
			margin-right: 10rpx;
		}

		.btnsInfo {
			width: 40%;
			display: flex;
			font-size: 32rpx;
		}

		.cancelEdit {
			text-align: right;
			display: flex;

			text {
				color: #1A9CEE;
				height: 80rpx;
				line-height: 80rpx;
				display: inline-block;
				font-size: 32rpx;
			}

			button {
				background: #1A9CEE;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				color: #fff;
				width: 140rpx;
				margin-left: 40rpx;
			}
		}
	}
</style>
